<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->

    <div id="nav">
      <ul id="nav-box">
        <!-- <a href="/home">home</a> -->
        <!-- exact默认值为false，它的作用：当访问/和/about时，元素样式都会被激活(因为/about包含了/跟路由)，是否激活是按照全包含匹配的，那么/路径会点亮各个路由，我们用exact就可以精确点亮需要的路由 -->
        <!-- 使用router-link来导航，tag属性可以生成对应的标签 -->
        <!-- event的值是改变触发路由的事件，默认值是click事件 -->
        <router-link to="/home" exact tag="li" event="click">
          <span>home</span>
        </router-link>
          <!-- <a href="/document">document</a> -->
          <!-- 路径信息可以写成对象的形式，注意to必须是绑定属性 -->
          <!-- active-class默认的样式名称是"router-link-active"，设置激活时的css类名，你也可以在路由配置中用linkActiveClass全局配置 -->
          <router-link :to="{path: '/document'}" active-class="myselfClass" tag="li" event="click">
            <span>document</span>
          </router-link>
          <!-- <a href="/about">about</a> -->
          <router-link to="/about" tag="li" event="click">
            <span>about</span>
          </router-link>

          <router-link to="/user" tag="li" event="click">
            <span>user</span>
          </router-link>
        
      </ul>
    </div>

    <div>

      <input type="button" value="后退" @click="backHandle">
      <input type="button" value="前进" @click="forwardHandle">

      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <input type="text" v-model="numbers">
      <input type="button" value="控制前进后退的步数" @click="goHandle">

      <input type="button" value="跳转到 document ( push方式 )" @click="pushHandle">
      <input type="button" value="跳转到 document ( replace方式 )" @click="replaceHandle">
      
    </div>

    <div>
      当前路由导航的的下标:
      {{$route.meta.index}}
    </div>

    <div>
      <input type="button" value="清空localStorage" @click="clearAll">
    </div>

    <!-- transition标签包裹的内容，可以实现Vue的导航过渡效果，请看css的样式。mode属性的值有in-out和out-in，请看文档。name的相关信息查看文档 -->
    <transition :name="names">
      <!-- 路由匹配渲染的视图 -->
      <!-- 这里的center类会被渲染，并且不会覆盖不同名称的类 -->
      <router-view class="center"></router-view>
    </transition>


    <!-- 命名视图，name的值是对应不同的视图(一个页面可以渲染多个组件，而不是嵌套的组件。我们在路由中去配置) -->
    <router-view name="slider"></router-view>

  </div>
</template>

<script>
// es6语法 export
export default {
  name: 'app',
  data(){
    return {
      names: 'left',
      numbers: 0,
      userName: '',
    }
  },
  created () {

  },
  methods: {
    backHandle(){
      this.$router.back();
    },
    forwardHandle(){
      this.$router.forward();
    },
    goHandle(){
      this.$router.go(this.numbers);
    },
    pushHandle(){
      this.$router.push({name: 'document'});
    },
    replaceHandle(){
      this.$router.replace({name: 'document'});
    },
    clearAll(){
      localStorage.clear();
      this.$router.replace({name: 'login'});
    }
  },
  watch: {
    $route(to, from){
      if(to.meta.index < from.meta.index){
        this.names = 'right';
      }else {
        this.names = 'left';
      }
    }
  }
}
</script>

<style scoped lang="less">
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */

// 引入样式
@import 'assets/css/index.less';

// router-link-active是被选中的路由的class名称。我们也可以在路由实例对象的属性linkActiveClass中自定义其名称，例如改为is-active
// .router-link-active {
//   a {
//     color: red;
//   }
// }
.is-active {
  background-color: green;
  a {
    color: red;
  }
}
.myselfClass {
  background-color: pink;
}

// Vue组件导航过渡的样式,更多请看文档
.v-enter, .v-leave-to {
  opacity: 0;
}
.v-enter-to, .v-leave {
  opacity: 1;
}
.v-enter-active, .v-leave-active {
  transition: 1s;
}

// 设置了下面的过渡特效动画，应该把transition标签中的mode="out-in"属性删除，使不同组件之间同步进行动画。
// 我们可以设置动态切换name
.left-enter {
  transform: translateX(100%);
}
// .left-enter-to {
//   transform: translateX(0);
// }
.left-enter-active, .left-leave-active {
  transition: 1s;
}
// .right-leave {
//   transform: translateX(0);
// }
.left-leave-to {
  transform: translateX(-100%);
}


.right-enter {
  transform: translateX(-100%);
}
.right-enter-active, .right-leave-active {
  transition: 1s;
}
.right-leave-to {
  transform: translateX(100%);
}

</style>
